import React, {PureComponent} from 'react';
import "./index.less";

const category = [
    {
        id: "1",
        name: "运营信息",
    },
    {
        id: "2",
        name: "设备信息",
    },
    {
        id: "3",
        name: "设备状况"
    }
];

export default class Device extends PureComponent {
    constructor(props){
        super(props);

        this.state = {
            category,
            tabId: 0,
        }
    }

    componentDidMount() {
        let status = this.props.match.params.status || 0;
        if (status) {
            this.setState({ tab: status });
            let defaultTab = this.state.category.filter(item => {
                return item.id === status;
            });

            if (defaultTab.length > 0) {
                this.checkTab(defaultTab[0]);
            }
        } else {
            this.checkTab(this.state.category[0]);
        }
    }

    componentDidUpdate() {
    }

    render() {
        const { category, tabId } = this.state;

        return (
            <div className="device">
                <div className="deviceID">B12312321</div>
                <div className="tab">
                    <ul>
                        {
                            category.map((item, index) => {
                                return <li key={ index } className={ item.ck ? "active" : "" } onClick={ this.checkTab.bind(this, item) }>{ item.name }</li>
                            })
                        }
                    </ul>
                </div>
                {
                    tabId === "1" && (
                        <div className="yunying">
                            <div className="scope">
                                <h6>基本信息</h6>
                                <div className="info">
                                    <dl>
                                        <dt>编号</dt>
                                        <dd>B8016085</dd>
                                    </dl>
                                    <dl>
                                        <dt>位置</dt>
                                        <dd>苏州市昆山市福洪街3号海淀区信息路12号</dd>
                                    </dl>
                                    <dl>
                                        <dt>别名</dt>
                                        <dd>金博士</dd>
                                    </dl>
                                    <dl>
                                        <dt>购机时间</dt>
                                        <dd>2021-04-08</dd>
                                    </dl>
                                    <dl>
                                        <dt>描述</dt>
                                        <dd>--</dd>
                                    </dl>
                                </div>
                            </div>
                            <div className="scope">
                                <h6>运营信息</h6>
                                <div className="info">
                                    <dl>
                                        <dt>补货员</dt>
                                        <dd>金博士</dd>
                                    </dl>
                                    <dl>
                                        <dt>点位</dt>
                                        <dd>北京新青海喜来登酒店</dd>
                                    </dl>
                                    <dl>
                                        <dt>ICCID</dt>
                                        <dd>89860402102070095734</dd>
                                    </dl>
                                </div>
                            </div>
                            <div className="scope">
                                <h6>财务信息</h6>
                                <div className="info">
                                    <dl>
                                        <dt>租金模式</dt>
                                        <dd>固定租金</dd>
                                    </dl>
                                    <dl>
                                        <dt>电费</dt>
                                        <dd>--</dd>
                                    </dl>
                                    <dl>
                                        <dt>补货员提成</dt>
                                        <dd>--%</dd>
                                    </dl>
                                    <dl>
                                        <dt>拓展业务提成</dt>
                                        <dd>--%</dd>
                                    </dl>
                                    <dl>
                                        <dt>其他提成</dt>
                                        <dd>--%</dd>
                                    </dl>
                                </div>
                            </div>
                        </div>
                    )
                }
                {
                    tabId === "2" && (
                        <div className="info">
                            <div className="scope">
                                <h6>基本信息</h6>
                                <div className="info">
                                    <dl>
                                        <dt>编号</dt>
                                        <dd>B8016085</dd>
                                    </dl>
                                    <dl>
                                        <dt>出厂编号</dt>
                                        <dd>2021322-NSDZ33DSC-4-1183</dd>
                                    </dl>
                                    <dl>
                                        <dt>设备编号</dt>
                                        <dd>万豪酒店49寸横屏机 <br/>（NSDZ33DSC-4）</dd>
                                    </dl>
                                    <dl>
                                        <dt>操作系统</dt>
                                        <dd>004_NS_V3.9.30_cart1015</dd>
                                    </dl>
                                    <dl>
                                        <dt>触屏规格</dt>
                                        <dd>1080×1920</dd>
                                    </dl>
                                    <dl>
                                        <dt>纸币器</dt>
                                        <dd>没有</dd>
                                    </dl>
                                    <dl>
                                        <dt>硬币器</dt>
                                        <dd>没有</dd>
                                    </dl>
                                    <dl>
                                        <dt>硬币器</dt>
                                        <dd>1</dd>
                                    </dl>
                                </div>
                            </div>
                            <div className="scope">
                                <h6>货柜/主机-A</h6>
                                <div className="info">
                                    <dl>
                                        <dt>压缩机</dt>
                                        <dd>支持</dd>
                                    </dl>
                                    <dl>
                                        <dt>暖管</dt>
                                        <dd>不支持</dd>
                                    </dl>
                                    <dl>
                                        <dt>货道类型</dt>
                                        <dd>弹簧货道</dd>
                                    </dl>
                                    <dl>
                                        <dt>货道数</dt>
                                        <dd>57</dd>
                                    </dl>
                                </div>
                            </div>
                        </div>
                    )
                }
                {
                    tabId === "3" && (
                        <div className="deviceStatus">
                            <div className="deviceInfo block">
                                <i />
                                <div className="info-main">
                                    <h6>NO.B8016085</h6>
                                    <p>万豪酒店49寸横屏机</p>
                                    <p>苏州市昆山市福洪街3号海淀区信息路12号</p>
                                </div>
                            </div>
                            <div className="wendu block">
                                <i />
                                <div className="info columnSpaceBetween">
                                    <p>温度控制</p>
                                    <p>19.0℃</p>
                                </div>
                            </div>
                            <div className="statusDetail">
                                <div className="statusDetailInfo">
                                    <div className="icons rowSpaceBetween block">
                                        <div><i className="deviceStatus" />正常</div>
                                        <div><i className="xinhao" />一般</div>
                                        <div><i className="zhengchang" />76.9%</div>
                                    </div>
                                    <div className="detailDsc">
                                        <div className="arrow" />
                                        <div className="zhengchangDsc">一切正常~</div>
                                    </div>
                                    <div className="detailDsc yichang">
                                        <div className="arrow" />
                                        <div className="yichangDsc">
                                            <div className="header rowSpaceBetween">
                                                <div className="h-left">缺货情况 <span><i>84</i>/377</span></div>
                                                <div className="rowCenter"><span className="que">缺</span>共293件</div>
                                            </div>
                                            <ul>
                                                <li>
                                                    <div className="img-box"><img src="" alt=""/></div>
                                                    <div className="main">
                                                        <div>奶茶</div>
                                                        <div className="item">
                                                            <div className="item-detail"><strong>剩余：17/</strong>20</div>
                                                            <div className="rowCenter"><span className="que">缺</span>3件</div>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div className="img-box"><img src="" alt=""/></div>
                                                    <div className="main">
                                                        <div>奶茶</div>
                                                        <div className="item">
                                                            <div className="item-detail"><strong>剩余：17/</strong>20</div>
                                                            <div className="rowCenter"><span className="que">缺</span>3件</div>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                        <p className="tips">温馨提示：你还有部分货道从没有补过货物哦~</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    )
                }
            </div>
        )
    }

    checkTab = (record) => {
        let category = this.state.category;

        for (let i = 0; i < category.length; i++) {
            let item = category[i];

            item.ck = item.id === record.id;
        }

        this.setState({ category: [...category], tabId: record.id });
    };
}
